<template>
  <div class="content">
    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="7">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="规格">
            <el-input v-model="form.goods_descript" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="型号">
            <el-input v-model="form.goods_barcode" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="按分类筛选">
            <el-select v-model="form.gt_pno" placeholder="请选择大类分类" class="selectbtn" @change="getTypeS" clearable>
              <el-option v-for="item in typeListB" :key="item.gt_id" :label="item.gt_name" :value="item.gt_name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="smalltype">
          <el-form-item label="">
            <el-select v-show="!typeListS.length" v-model="form.gt_name" placeholder="请选择小类分类" class="selectbtn"
              clearable disabled>
              <el-option label="" value="">
              </el-option>
            </el-select>
            <el-select v-show="typeListS.length" v-model="form.gt_name" placeholder="请选择小类分类" class="selectbtn"
              clearable>
              <el-option v-for="item in typeListS" :key="item.gt_id" :label="item.gt_name" :value="item.gt_name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="SearchBtn">
          <el-button type="primary" @click="submitForm" plain>立即搜索</el-button>
          <el-button type="warning" @click="resetForm" plain>清空条件</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { commodityType } from '../../http/apis/goodsApi/commodity.js'
  export default {
    name: "GoodsSearch",
    componets: {},
    data() {
      return {
        form: {
          goods_name: '',//商品名称
          goods_descript: '',//商品规格
          goods_barcode: '',//商品型号
          gt_pno: '',//商品大类
          gt_name: ''//商品小类
        },
        typeListB: [],//商品大类列表
        typeListS: [],//商品小类列表
      };
    },
    props: {
    },
    methods: {
      // 请求种类
      getType(num) {
        commodityType(num).then((res) => {
          console.log('种类成功请求：', res.data.data);
          if (res.data.code == '200') {
            if (!num) {
              this.typeListB = res.data.data
            } else {
              this.typeListS = res.data.data
            }
          }
        })
          .catch((err) => {
            console.log('请求失败', err)
          });
      },
      // 小类列表渲染
      getTypeS() {
        this.form.gt_name = ''//同步清除小类
        this.typeListS = ''//清除小类列表
        // 查找小类
        if (this.form.gt_pno) {
          let id = 0;
          this.typeListB.forEach((item) => {
            console.log(item.gt_name, this.form.gt_pno)
            if (item.gt_name == this.form.gt_pno) {
              id = item.gt_id
            }
          });
          this.getType({ gt_id: id })
        }
      },
      // 指定查询
      submitForm() {
        this.$emit('highSearch', this.form);
      },
      // 清空条件
      resetForm() {
        for (let key in this.form) {
          this.form[key] = ''
        }
      }
    },
    created() {
      this.getType()
    }
  };
</script>

<style lang="scss" scoped>
  .content {
    margin: 20px 0px;
  }

  .selectbtn {
    width: 100%;
  }

  .smalltype {
    margin-left: -85px;
  }

  .SearchBtn {
    margin-left: 8%;
  }
</style>